<!--
 * @Description: 邀请pk赛查看邀请数据
 * @Author: Li Yujie
 * @Date: 2021/10/19
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/10/19
-->
<template>
    <PageLayout :title="`查看数据 - 第${activity_index}期`">
        <template slot="sub-title">
            {{ start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }} - {{ end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
        </template>
        <template slot="header-right">
            <div
                class="back"
                @click="handleRoute('invitePkActivityList')"
            >返回</div>
        </template>
        <template slot="filter">
            <div class="filter-item">
                <div class="filter-item__title">
                    所属学校
                </div>
                <el-cascader
                    v-model="filterData.school_name"
                    placeholder="请选择学校"
                    :options="school_tree"
                    filterable
                    clearable
                    size="medium"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                    :props="{
                        label: 'name',
                        value: 'name',
                        children: 'children',
                        emitPath: false
                    }"
                />
            </div>
            <div class="filter-item">
                <div class="filter-item__title">
                    活动资格
                </div>
                <el-select
                    v-model="filterData.status"
                    filterable
                    placeholder="全部"
                    size="medium"
                    @change="getTableData(1)"
                >
                    <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </div>
            <div class="filter-item">
                <el-button
                    type="primary"
                    size="small"
                    class="query-button"
                    @click="getTableData(1)"
                >
                    查询
                </el-button>
            </div>
        </template>
        <!--筛选-->
        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            ref="table"
            class="data-table"
            row-key="id"
            v-loading="tableLoading"
            @sort-change="handleSortChanged"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                align="center"
                width="60"
                reserve-selection
                type="selection"
            />
            <el-table-column
                label="序号"
                align="center"
                width="60"
                type="index"
            />
            <el-table-column
                prop="school_name"
                label="学校名称"
                show-overflow-tooltip
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="invite_count"
                label="邀请数量"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="certified_count"
                label="已认证数量"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                prop="rank"
                label="榜单排名"
                align="center"
                show-overflow-tooltip
                sortable="custom"
            />
            <el-table-column
                prop="award_money"
                label="奖金池瓜分"
                align="center"
                show-overflow-tooltip
            />
            <el-table-column
                label="活动资格"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <div class="status-wrapper">
                        <div
                            :class="['status-dot',scope.row.status === 1 ? 'success' : 'danger']"/>
                        <div v-if="scope.row.status === 1">未取消</div>
                        <div
                            v-if="scope.row.status === -1"
                            style="color: #F95B56">已取消</div>
                        <div
                            v-if="scope.row.status === -2"
                            style="color: #F95B56">已淘汰</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="left"
                width="180"
            >
                <template slot-scope="scope">
                    <div class="option-btn-group">
                        <el-button
                            type="text"
                            size="medium"
                            :disabled="scope.row.status === -2"
                            @click="handleSetStatus(scope.row, -2)"
                        >
                            淘汰
                        </el-button>
                        <!--<el-button
                            type="text"
                            size="medium"
                            :disabled="scope.row.status !== 1"
                            @click="handleSetStatus(scope.row, -1)"
                        >
                            本档期资格取消
                        </el-button>-->
                        <el-button
                            type="text"
                            size="medium"
                            :disabled="scope.row.award_status === 1"
                            @click="handleAward(scope.row)"
                        >
                            {{ scope.row.award_status ? '已派发' : '奖金派发' }}
                        </el-button>
                        <el-button
                            type="text"
                            size="medium"
                            @click="handleRoute('invitePkActivitySchoolDetail', {
                                task_no: filterData.task_no,
                                school_name: scope.row.school_name,
                                school_id: scope.row.school_id,
                                activity_index: activity_index,
                                start_time,
                                end_time,
                            })"
                        >
                            查看明细
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- /分页 -->
        <template slot="pagination">
            <div style="margin-left: 22px">
                <el-checkbox
                    label="当页全选"
                    v-model="checkAllStatus"
                    :indeterminate="checkIndeterminate"
                    :disabled="tableData.length === 0"
                    @change="handleSelectedAll"
                />
                <el-button
                    type="text"
                    size="medium"
                    style="margin-left: 12px"
                    :disabled="multipleSelection.length === 0"
                    @click="handleAwardBatch()"
                >
                    批量派发
                </el-button>
            </div>
            <el-pagination
                layout="total, prev, pager, next, jumper"
                background
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </template>
        <!-- 确认移除弹窗 -->
        <el-dialog
            :title="set_status === -1 ? '取消资格' : '淘汰用户'"
            :visible.sync="dialogVisible"
            width="640px"
            :close-on-click-modal="false"
            class="reject-dialog"
            @close="reason = ''"
        >
            <div class="reject-tips">
                <div class="icon">
                    <i class="el-icon-warning"/>
                </div>
                <div class="content">
                    <div v-if="set_status === -1">本档期资格取消后，再次报名数据重新计算</div>
                    <div v-if="set_status === -2">淘汰后，该精英将不能参与本次活动</div>
                </div>
            </div>
            <div class="reject-title is-required">
                <span style="color: #FF3030">*</span>
                {{ set_status === -1 ? '取消资格' : '淘汰' }}原因
            </div>
            <el-input
                v-model="reason"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                :placeholder="`请输入${set_status === -1 ? '取消资格' : '淘汰'}原因`"
                :maxlength="100"
                show-word-limit
            />
            <div class="dialog-footer">
                <el-button
                    size="medium"
                    type="default"
                    :style="{width: '100px', marginRight: '32px'}"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '100px'}"
                    :disabled="!reason"
                    @click="confirmSetStatus(apply_no, set_status, reason)"
                >
                    确认
                </el-button>
            </div>
        </el-dialog>
    </PageLayout>
</template>

<script>
import { back } from '@/mixin/back';

export default {
    name: 'ElitePkApplyList',
    mixins: [back],
    components: {},
    data() {
        return {
            activity_index: '',
            start_time: '',
            end_time: '',
            filterData: {
                task_no: '',
                sort_field: '',
                sort_type: '',
                // 学校名称
                school_name: '',
                status: 99,
            },
            tableData: [],
            tableLoading: false,
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            statusList: [
                {label: '全部', value: 99},
                {label: '正常', value: 1},
                {label: '已取消', value: -1},
                {label: '已淘汰', value: -2},
            ],
            school_tree: [],
            dialogVisible: false,
            reason: '',
            apply_no: '',
            set_status: '',
            checkAllStatus: false,
            checkIndeterminate: false,
            multipleSelection: []
        };
    },
    computed: {},

    mounted() {
        let { query } = this.$route;

        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '工作'}, {title: '邀请好友'}, {title: '邀请管理', path: '/student/invite-manage'},
            {title: '邀请PK赛', path: '/student/invite-pk-activity-list?active=105'},
            {title: '查看数据'}]);
        this.authResult = this.$route.meta.authResult;
        this.activity_index = query.activity_index;
        this.start_time = query.start_time;
        this.end_time = query.end_time;
        this.filterData.task_no = query.task_no;
        this.getSchoolTree();
        this.getTableData();
    },

    methods: {

        /**
         * @description 获取省/市/学校三级联动
         */
        getSchoolTree () {
            this.$post('/student/local_info%5Cschool_tree',{},resp => {
                if (resp.code === 1) {
                    this.school_tree = resp.data.tree;
                }
            });
        },

        /**
         * @description 获取列表数据
         * @param page
         */
        getTableData(page) {
            this.tableLoading = true;
            let params = { ...this.filterData };

            params.page_id = page || this.page.now_page;
            this.$post('/student/task_stuagent_extra_student_invite_activity%5Cschool%5Cget_list', params, res => {
                if (res.code === 1) {
                    this.tableData = res.data.list;
                    this.page = res.data.page;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 资格取消
         * @param row
         * @param type - -1取消资格 -2淘汰
         */
        handleSetStatus(row, type) {
            if(!this.authResult.auth_set) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.apply_no = row.apply_no;
            this.set_status = type;
            this.dialogVisible = true;
        },

        /**
         * 确认淘汰
         * @param id
         * @param status
         * @param cancel_reason
         */
        confirmSetStatus(id, status, cancel_reason = '') {
            let params = {
                id,
                status,
                cancel_reason,
            };

            this.$post('/student/task_stuagent_extra_student_invite_activity%5Cschool%5Cset_status', params, res => {
                if (res.code === 1) {
                    this.dialogVisible = false;
                    this.getTableData();
                    this.$notify({
                        title: '提示',
                        type: 'success',
                        message: '操作成功'
                    });
                } else {
                    this.$notify({
                        title: '提示',
                        type: 'warning',
                        message: res.msg
                    });
                }
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * @description 数据排序
         */
        handleSortChanged(data) {
            let sortTypeMap = {
                ascending: 1,
                descending: 0
            };

            if (data.order) {
                this.filterData.sort_field = data.prop;
                this.filterData.sort_type = sortTypeMap[data.order];
            } else {
                this.filterData.sort_field = '';
                this.filterData.sort_type = '';
            }

            this.getTableData();
        },

        /**
         * 点击全选
         * @param val
         */
        handleSelectedAll(val) {
            if(val) {
                this.$refs.table.toggleAllSelection();
            } else {
                this.$refs.table.clearSelection();
            }
            this.checkIndeterminate = false;
        },

        /**
         * 选中
         * @param selection
         */
        handleSelectionChange(selection) {
            let checkedCount = selection.length;

            this.multipleSelection = selection;
            this.checkAllStatus = checkedCount === this.tableData.length;
            this.checkIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
        },

        /**
         * 派发奖励
         * @param row
         */
        handleAward(row) {
            if(!this.authResult.auth_award) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$zdConfirm('是否确定发放该笔奖金？', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    id: row.id
                };

                this.$post('/student/task_stuagent_extra_student_invite_activity%5Cschool%5Cset_award', params, res => {
                    if (res.code === 1) {
                        this.getTableData();
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '发放成功'
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            }).catch(() => {});
        },

        /**
         * 批量派发
         */
        handleAwardBatch() {
            if(!this.authResult.auth_award_batch) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
            this.$zdConfirm('是否确定发放该笔奖金？', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let params = {
                    ids: this.multipleSelection.map(item => {
                        return item.ids;
                    }).join()
                };

                this.$post('/student/task_stuagent_extra_student_invite_activity%5Cschool%5Cset_award_batch', params, res => {
                    if (res.code === 1) {
                        this.getTableData();
                        this.$refs.table.clearSelection();
                        this.$notify({
                            title: '提示',
                            type: 'success',
                            message: '发放成功'
                        });
                    } else {
                        this.$notify({
                            title: '提示',
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            }).catch(() => {});
        }
    }
};
</script>

<style lang="less" scoped>
.reject-dialog {
    .reject-tips {
        display: flex;
        align-items: flex-start;
        margin-bottom: 24px;
        .icon {
            font-size: 16px;
            margin-right: 10px;
            margin-top: 3px;
            color: #F95B56;
        }
        .content {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 22px;
        }
    }
    .reject-title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        margin-bottom: 12px;
    }
    /deep/ .el-dialog__footer {
        text-align: center;
        padding: 0 0 30px;
        margin-top: 6px;
    }

    /deep/ .el-dialog__body {
        padding: 24px 64px;
    }
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
}

/deep/ .header {
    .header-left {
        align-items: flex-end!important;
        color: rgba(47, 189, 179, 1);
        font-size: 14px;
    }
}

.back {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    cursor: pointer;
}
</style>
